<template>
  <!-- 购买或者加入购物车的时候选择商品的种类 -->
  <u-popup
    mode="bottom"
    v-model="showSkuPopup"
    :z-index="121"
    border-radius="24"
    safe-area-inset-bottom
    :customStyle="is_rotate ? rotate : ''"
    :duration="0"
  >
    <view :class="['popup-body', { body_newstyle: is_rotate }]">
      <view class="pup-details">
        <view class="pup-details-top">
          <view class="goods-img">
            <image :src="skuImg" mode="aspectFill"></image>
          </view>
          <view class="goods-info">
            <view class="price">
              <text>¥</text>
              <text>{{ skuPrice | priceBeforeZero }}</text>
              <text>{{ skuPrice | priceAfterZero }}</text>
            </view>
            <view class="rest-num">
              {{ $t("goods.inventory") }}{{ skuRest }}</view
            >
            <view class="has-selected" v-if="skuText"
              >{{ $t("goods.choosedSku") }} {{ skuText || "" }}</view
            >
            <view class="has-selected" v-if="finalmsg && finalmsg.min_price"
              >最低砍价至：¥{{ finalmsg.min_price }}</view
            >
          </view>
        </view>
        <scroll-view class="attr-section" scroll-y>
          <view class="sku-attr">
            <template v-if="shopmsg">
              <view
                class="attr-group"
                v-for="(item, index) in shopmsg.attr_group_list"
                :key="index"
              >
                <view class="attr-group-name">{{ item.attr_group_name }}</view>
                <view class="attr-list">
                  <view
                    v-for="(SecondItem, SecondIndex) in item.attr_list"
                    :key="SecondIndex"
                    class="attr-item"
                    :class="[
                      subIndex[index] == SecondIndex ? 'selected' : '',
                      !SecondItem.isShow ? 'noneActive' : '',
                    ]"
                    @click="
                      selectSpecs(
                        SecondItem.attr_id,
                        index,
                        SecondIndex,
                        SecondItem.isShow,
                        item.attr_group_name,
                        item.attr_group_id,
                        SecondItem.attr_name,
                        SecondItem
                      )
                    "
                  >
                    {{ SecondItem.attr_name }}
                  </view>
                </view>
              </view>
            </template>
          </view>

          <view class="shop-num">
            <view class="shop-num-text">{{ $t("goods.number") }}</view>
            <view>
              <!-- 计数器 -->
              <numberStep
                v-model="selectNum"
                :min="1"
                :max="skuRest"
                :disabled="!!activityCutPriceId"
              ></numberStep>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="close-icon" @click="hidePopup">
        <view class="icon-box">
          <i class="iconfont icon-close"></i>
        </view>
      </view>
      <!-- 底部按钮 -->
      <view class="foot-btns">
        <view class="foot-content">
          <view class="confirm-btn" @click="selectNumChange">{{
            $t("list.confirm")
          }}</view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
import numberStep from "@/components/cyyUi/numberStep/index.vue";

export default {
  name: "",
  props: {
    ptId: {
      type: [String, Number],
      default: -1,
    },
    finalmsg: {
      type: Object,
      default: {},
    },
    shopmsg: {
      type: Object,
      default: {},
    },
    subIndex: {
      type: Array,
      default: [],
    },
    shopimg: {
      type: String,
      default: "",
    },
    is_rotate: {
      type: Boolean,
      default: false,
    },

    activityCutPriceId: {
      type: [String, Number],
      default: "",
    },
  },
  mixins: [],
  components: {
    numberStep,
  },
  data() {
    return {
      selectNum: 1,
      showSkuPopup: false,
      attrArr: [],
      skuText: "",
    };
  },
  mounted() {
    if (this.shopmsg) {
      this.attrArr = JSON.parse(JSON.stringify(this.shopmsg.attr_group_list));
    }
  },
  watch: {
    showSkuPopup() {
      this.$nextTick(() => {
        if (this.shopmsg) {
          if (this.shopmsg.use_attr == 0) {
            let item = this.shopmsg.attr_group_list[0],
              itemList = item.attr_list[0];

            this.selectSpecs(
              itemList.attr_id,
              0,
              0,
              true,
              item.attr_group_name,
              item.attr_group_id,
              itemList.attr_name,
              itemList
            );
          } else {
          }
        }
      });
    },
  },
  filters: {
    priceBeforeZero(val) {
      if (!val) return "";
      val = val.toString();
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (!val) return "";
      val = val.toString();
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.length);
    },
  },
  computed: {
    rotate() {
      var obj = {
        transform: "rotate(90deg)",
        width: "100vh",
        height: "100vw",
        position: "absolute",
        top: "230rpx",
        bottom: 0,
        right: 0,
        left: "-198rpx",
      };
      return obj;
    },
    skuImg() {
      if (this.finalmsg && this.finalmsg != null) {
        if (this.finalmsg.pic && this.finalmsg.pic != "") {
          return this.finalmsg.pic;
        } else {
          return this.shopimg;
        }
      } else {
        return this.shopimg;
      }
    },
    skuPrice() {
      if (this.finalmsg && this.finalmsg != null) {
        if (this.finalmsg.is_level) {
          return this.finalmsg.level_price;
        } else {
          return this.finalmsg.goods_price || this.finalmsg.price;
        }
      } else {
        // 如果是拼团商品 && 选择开团或拼团
        if (this.shopmsg?.pt_activity && this.ptId > -1)
          return this.shopmsg.pt_activity.pt_price;
        // 群特价
        if (this.shopmsg?.activityWechatRoom?.inRoom)
          return this.shopmsg.activityPrice;
        if (this.shopmsg) return this.shopmsg.price;
      }
    },
    skuRest() {
      if (this.finalmsg && this.finalmsg != null) {
        return parseInt(this.finalmsg.num);
      } else {
        if (this.shopmsg) return parseInt(this.shopmsg.num);
      }
    },
  },
  methods: {
    //关闭弹窗
    closePopup() {
      this.$emit("closeSkuPopup");
    },
    hidePopup() {
      this.showSkuPopup = false;
      this.skuText = "";
    },
    showPopup() {
      this.showSkuPopup = true;
    },
    //选择规格
    selectSpecs(
      id,
      pindex,
      index,
      disable,
      pname,
      attr_group_id,
      attr_name,
      item
    ) {
      if (!item.isShow) return;
      this.attrArr.forEach((d) => {
        if (d.attr_group_id == attr_group_id) {
          d["select_name"] = attr_name;
        }
      });
      this.concatSkuText();
      this.$emit("selectPushData", {
        id,
        pindex,
        index,
        disable,
        pname,
        attr_group_id,
      });
    },
    concatSkuText() {
      let str = "";
      let arr = [];
      this.attrArr.forEach((d) => {
        arr.push(d.select_name);
      });
      if (arr.length) {
        str = arr.join();
        this.skuText = str;
      } else {
        this.skuText = "";
      }
    },
    selectNumChange(e) {
      this.$emit("setSelectNum", this.selectNum);
      this.$emit("buyNow");
    },
  },
};
</script>

<style lang="scss" scoped>
.body_newstyle {
  width: 70% !important;
  margin: auto !important;
}
.popup-body {
  width: 100%;
  background-color: #ffffff;
  padding-top: 4.8vw;
  max-height: 80vh;
  position: relative;
  .pup-details {
    padding-bottom: 20rpx;
    width: 100%;
    .pup-details-top {
      padding: 0 4.8vw;
      display: flex;
      align-items: flex-end;
      position: relative;
      .goods-img {
        width: 25.6vw;
        height: 25.6vw;
        background: #f2f2f2;
        border-radius: 1.86vw;
        overflow: hidden;
        margin-right: 2.67vw;
        image {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .goods-info {
        flex: 1;
        text-align: left;
        .price {
          display: flex;
          align-items: flex-end;
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #f0250e;
          text:nth-child(2) {
            font-size: 44rpx;
            line-height: 47rpx;
          }
        }
        .rest-num {
          font-size: 22rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #f0250e;
        }
        .has-selected {
          font-size: 22rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #8c8c8c;
        }
      }
    }

    .attr-section {
      width: 100%;
      margin-top: 20rpx;
      max-height: 50vh;
      overflow-y: scroll;
      overflow-x: hidden;
      .sku-attr {
        padding-bottom: 20rpx;
      }
      .attr-group {
        padding: 3.2vw 3.2vw 0 3.2vw;
        width: 100%;
        margin-bottom: 2.67vw;
        .attr-group-name {
          margin-bottom: 2.4vw;
          padding-left: 1.6vw;
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #262626;
        }
        .attr-list {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          .attr-item {
            margin: 1.6vw;
            background: #f2f1f2;
            border-radius: 3.6vw;
            height: 7.2vw;
            padding: 0 2.67vw;
            line-height: 7.2vw;
            text-align: center;
            flex-shrink: 0;
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #262626;
          }
          .noneActive {
            color: #8c8c8c;
            text-decoration: line-through;
          }
          .selected {
            background: #fbeceb;
            color: #f0250e;
          }
        }
      }
    }

    .shop-num {
      padding: 0 4.8vw;
      height: 10.66vw;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .shop-num-text {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #262626;
      }
    }
  }
  .close-icon {
    width: 12.78vw;
    height: 12.78vw;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 11;
    display: flex;
    justify-content: center;
    align-items: center;

    .iconfont {
      color: #262626;
      font-weight: 600;
      font-size: 36rpx;
    }
  }

  .foot-btns {
    width: 100%;
    border-top: 1px solid #f0f1f3;
    .foot-content {
      width: 100%;
      height: 13.34vw;
      display: flex;
      justify-content: center;
      align-items: center;
      .confirm-btn {
        width: 90.4vw;
        height: 10.134vw;
        border-radius: 5.067vw;
        background: linear-gradient(90deg, #f22407 0%, #f84d17 100%);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #ffffff;
      }
    }
  }
}

::v-deep {
  .number-step {
    height: 68rpx;

    .reduce-action,
    .add-action {
      width: 68rpx;
    }

    .add-action::before,
    .reduce-action::after {
      height: auto;
      bottom: 8rpx;
    }
  }
}
</style>
